<template>
  <div>
    <section class="table-section">
      <h2 class="title">计划详情</h2>
      <!-- First planned table  -->
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="equipmentId" label="设备编号"></el-table-column>
        <el-table-column prop="fixType" label="检修分类"></el-table-column>
        <el-table-column prop="content" label="工单内容"></el-table-column>
        <el-table-column prop="spotCheckJob" label="点检分工"></el-table-column>
        <el-table-column prop="overhaulJob" label="检修分工"></el-table-column>
        <el-table-column prop="operateJob" label="操作分工"></el-table-column>
        <el-table-column prop="todoMethod" label="实施方式"></el-table-column>
      </el-table>

      <!-- Second planned table  -->
      <el-table :data="list" style="width: 100%; margin-top: 20px">
        <el-table-column prop="scheduledBeginTime" label="计划开始时间"></el-table-column>
        <el-table-column prop="scheduledEndTime" label="计划结束时间"></el-table-column>
        <el-table-column prop="workOrderLink" label="工单环节"></el-table-column>
        <el-table-column prop="plannedSpare" label="计划备件"></el-table-column>
        <el-table-column prop="plannedSpareCost" label="计划备件费用"></el-table-column>
        <el-table-column prop="plannedMaterial" label="计划材料"></el-table-column>
        <el-table-column prop="plannedMaterialCost" label="计划材料费用"></el-table-column>
        <el-table-column prop="plannedTool" label="计划工器具"></el-table-column>
        <el-table-column prop="plannedToolCost" label="计划工器具费用"></el-table-column>
        <el-table-column prop="plannedLabor" label="计划人工"></el-table-column>
        <el-table-column prop="plannedLaborCost" label="计划人工费"></el-table-column>
      </el-table>
    </section>

    <section class="table-section">
      <h2 class="title">实际详情</h2>
      <!-- First actual table -->
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="actualBeginTime" label="实际开始时间"></el-table-column>
        <el-table-column prop="actualEndTime" label="实际结束时间"></el-table-column>
        <el-table-column prop="implementerUserId" label="实施人"></el-table-column>
        <el-table-column prop="workReport" label="工作报告"></el-table-column>
        <el-table-column prop="implementUnit" label="实施单位"></el-table-column>
      </el-table>

      <!-- Second actual table -->
      <el-table :data="list" style="width: 100%; margin-top: 20px">
        <el-table-column prop="actualSpare" label="实际备件"></el-table-column>
        <el-table-column prop="actualSpareCost" label="实际备件费用"></el-table-column>
        <el-table-column prop="actualMaterial" label="实际材料"></el-table-column>
        <el-table-column prop="actualMaterialCost" label="实际材料费用"></el-table-column>
        <el-table-column prop="actualTool" label="实际工器具"></el-table-column>
        <el-table-column prop="actualToolCost" label="实际工器具费用"></el-table-column>
        <el-table-column prop="actualLabor" label="实际人工"></el-table-column>
        <el-table-column prop="actualLaborCost" label="实际人工费"></el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'OrderDetail',
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      list:[],
    };
  },
  mounted() {
    const id = this.$route.params.id;
    this.getData(id);
  },
  methods: {
    getData(id) {
      axios
        .get(`http://localhost:9527/workOrder/getWorkOrderById/${id}`)
        .then((res) => {
          console.log(res.data.data);
          this.list = [res.data.data];
        })
        .catch(err => console.error(err));
    }
  }
}
</script>

<style scoped>
.table-section {
  margin-bottom: 30px;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.title {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 15px;
}
</style>